<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.girl{
				width: 79px;
				height: 108px;
				/* border: 1px solid red; */
				/* 运动 定位 */
				position: absolute;
				left: 0px;
				top: 0px;
				background:url(imgs/girl.png) no-repeat;
				background-position: -0px -216px;
			}
		</style>
	</head>
	<body>
	</body>
</html>
<script>
	
	// 小女孩的类
	// 属性：步长 步子 定时器 girlDom .... top
	// 方法：初始化  行走  死亡 godie
	
	function Girl(){
		// 实例对象
		// 属性
		this.girlDom = null;
		//浏览器高度
		this.windowH = window.innerHeight;
		// 随机的top值
		this.girlTop = parseInt(Math.random() * (this.windowH - 108));
		
		//步子
		this.buzi = 0;
		//步子的步长
		this.stepBuzi = 79;
		
		// 元素位置
		this.l = 0;
		// 元素运动步长 1 - 10
		this.step = parseInt(Math.random() * 10 + 1);
		
		//目标点
		this.target = 900;
		
		//定时器
		this.timer = null;
		
		//定时器时间 50 - 100
		this.interval = parseInt(Math.random() * 51 + 50);
		
		//实例调用原型对象上面的方法
		this.init();
		//再调用行走方法
		this.walk();
		
	};
	
	//初始化方法
	Girl.prototype.init = function(){
		// 创建小女孩
		this.girlDom = document.createElement('div');
		// 设置 类名 
		this.girlDom.className = 'girl';
		// 设置随机的上下位置
		this.girlDom.style.top = this.girlTop + 'px';
		// 添加到页面
		document.body.appendChild(this.girlDom);
		
		//监听容器改变事件
		let that = this;
		window.onresize = function(){
			that.windowH = window.innerHeight;
		};
	};
	
	//行走方法
	Girl.prototype.walk = function(){
		// 运动模型 开定时器
		//console.log(this); //引用类型 引用 桥接一下
		let that = this;
		
		this.timer = setInterval(function(){
			//里能拿到外面的 this
			//里面只要不用 this
			//累加步子
			that.buzi++;
			//验证
			that.buzi = that.buzi > 7 ? 0 : that.buzi;
			//累加元素运动
			that.l += that.step;
			//验证
			if(that.l >= that.target){
				//死亡方法
				that.die();
			};
			
			//设置
			that.girlDom.style.backgroundPosition = `-${that.buzi*that.stepBuzi}px -216px`;
			that.girlDom.style.left = that.l + 'px';
			
		}, this.interval);
		
	};
	
	//死亡方法
	Girl.prototype.die = function(){
		//停止定时器
		clearInterval(this.timer);
		//设置到终点
		this.l = this.target;
		//清除DOM
		this.girlDom.remove();
	};
	
	
	setInterval(function(){
		
		new Girl();
		
	}, 500)
	
</script>